<!-- table组件-->
<template>
  <div style="width:100%;overflow-x:auto">
    <el-table :data="tableData" border stripe style="width: 100%" class="table-list">
      <el-table-column v-if="hasSera" type="index" label="序号" width="50" align="center"></el-table-column>
      <template v-for="(item,idx) in tableLabels">
        <template v-if="tableProps[idx] != 'changeBtn'">
          <el-table-column
            :prop="tableProps[idx]"
            :key="idx"
            :label="item"
            align="center"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <template
                v-if="timeNameArray.includes(tableProps[idx])"
              >{{scope.row[tableProps[idx]] | getTimeString}}</template>
              <template v-else-if="tableFuns && tableFuns[tableProps[idx]]">
                <el-button
                  type="text"
                  @click="tableFuns[tableProps[idx]](scope.$index,scope.row)"
                >{{scope.row[tableProps[idx]]}}</el-button>
              </template>
              <template v-else>{{scope.row[tableProps[idx]]}}</template>
            </template>
          </el-table-column>
        </template>
        <template v-else>
          <el-table-column
            :prop="tableProps[idx]"
            :key="idx"
            :label="item"
            align="center"
            :width="280"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                v-for="(btnItem,btnIdx) in activeBtn?activeBtn(scope.row,tableChangeBtns):tableChangeBtns"
                :key="btnIdx"
                type="text"
                :disabled="btnItem.disabled"
                @click="btnItem.fn(btnItem.type,scope.$index)"
              >{{btnItem.label}}</el-button>
              <!-- 操作方法返回类型和index -->
            </template>
          </el-table-column>
        </template>
      </template>
    </el-table>
  </div>
</template>
<script>
import api from "@/api/apiPath";
import utils from "@/common/utils";
export default {
  data() {
    return {
      timeNameArray: ["updateTime", "operateTime", "createTime"]
    };
  },
  methods: {},
  created() {
    //如果是只读，去掉表头操作按钮一栏
    if (this.tableReadonly && this.tableProps.includes("changeBtn")) {
      this.tableLabels.pop();
    }
  },
  props: [
    "tableData", //table数据
    "tableLabels", //表头
    "tableChangeBtns", //操作按钮
    "tableProps", //props
    "hasSera", //是否含有序号
    "activeBtn", //操作按钮显示规则
    "tableReadonly", //只读 不显示操作按钮,无操作按钮不影响
    "tableFuns"
  ],
  destroyed() {},
  filters: {
    getTimeString(time) {
      return utils.getTimeString(time);
    }
  }
};
</script>

<style lang="stylus">
.table-lissst.el-table {
  .cell {
    white-space: normal !important;
  }
}
</style>
